<template>
	<view class='class-page'>
		<view class="class-tab">
			<view class="class-tab-item" :class="{active:activeTab===item.bookType}"
			v-for="item in bookTypeList"
			:key='item.bookType'
			 @click='changeTab(item.bookType)'>
				{{item.name}}
			</view>
		</view>
		<view class="scrollbox" v-if='showList'>
				<mescroll-uni :down="downOption" @init='mescrollInit' @emptyclick="downCallback" @down="downCallback" :up="upOption"
				 @up="upCallback" :fixed="false">
					<view  class='ws-book-item' v-for="(item,index) in booklist" :key="item.Id" @click='watchBookInfoEvent(item.Id)'>
						<view class="ws-book-imgb">
							<image class='ws-book-img' :src="imgUrl+item.Img" mode="aspectFill"></image>
							<view class="ws-book-score">
								{{item.Score}}分
							</view>
						</view>
						<view class="ws-book-info">
							<view class="ws-book-name">
								{{item.Name}}
							</view>
							<view class="ws-book-author">
								{{item.Author}}
							</view>
							<view class="ws-book-tag">
								<text class='tag-cname'>{{item.CName}}</text>
							</view>
							<view class="ws-book-doc">
								{{item.Desc}}
							</view>
						</view>
					</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.typeId = option.typeId
			uni.setNavigationBarTitle({
				title:option.name
			});
			this.getNovelBook(1)
		},
		data() {
			return {
				typeId:1,
				bookTypeList:[
					{
						bookType:'hot',
						name:'热门'
					},
					{
						bookType:'new',
						name:'最新'
					},
					{
						bookType:'vote',
						name:'评分'
					},
					{
						bookType:'over',
						name:'完结'
					}
				],
				activeTab:'hot',
				booklist: [],
				imgUrl:'https://imgapi.jiaston.com/BookFiles/BookImages/',
				page:1,
				hasNext:true,
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					toTop: {
						src: '/static/img/backtop.png'
					},
					textNoMore: '没有更多数据了'
				},
				mescroll: null,
				showList:true
			}
		},
		methods:{
			//初始化下拉对象
			mescrollInit(mescroll) {
				// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
				this.mescroll = mescroll
				this.mescroll.triggerDownScroll()
			},
			/*下拉刷新的回调*/
			downCallback(mescroll) {
				this.page = 1
				this.getNovelBook(this.page,mescroll)
			},
			/*上拉加载的回调*/
			upCallback(mescroll) {
				this.getNovelBook(++this.page,mescroll)
			},
			changeTab(type){
				this.activeTab = type
				this.page = 1
				this.hasNext = true
				this.showList= false
				setTimeout(()=>{
					this.showList= true
				})
			},
			watchBookInfoEvent(id){
				uni.navigateTo({
				    url: `/pages/books/bookInfo/bookInfo?bookid=${id}`
				});
			},
			async getNovelBook(page=1,mescroll){
				
				if(!this.hasNext){
					mescroll.endUpScroll(!this.hasNext);
					return
				}
				this.loadflag = true
				const data = await this.$https({
					url:`store/category/${this.typeId}/${this.activeTab}/${page}`,
				})
				if(data&&data.code===200){
					if(this.page===1){
						this.booklist = []
					}
					this.hasNext = data.data.HasNext
					this.booklist = this.booklist.concat(data.data.BookList)
					if(mescroll){
						mescroll.endSuccess()
					}
				}else{
					if(mescroll){
						mescroll.endErr()
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.class-page{
		.class-tab{
			display: flex;
			justify-content: space-around;
			background: #fff;
			// position: fixed;
			// top:0;
			// left:0;
			.class-tab-item{
				text-align: center;
				line-height: 80rpx;
				font-size:32rpx;
				color:#666;
				width:33%;
				&.active{
					color:#007AFF;
					border-bottom: 4rpx solid #007AFF;
				}
			}
		}
		.scrollbox{
			position: fixed;
			top:80rpx;
			bottom:0;
			left:0;
			right:0;
		}
		.loaddata{
			width:100%;
			line-height: 80rpx;
			text-align: center;
			font-size:32rpx;
			color:#999;
		}
		.ws-book-item{
			display: flex;
			padding:30rpx 20rpx 30rpx 30rpx;
			border-bottom:1px solid #ddd;
			.ws-book-imgb{
				width:240rpx;
				height:320rpx;
				position: relative;
				.ws-book-img{
					width:240rpx;
					height:320rpx;
				}
				.ws-book-score{
					position: absolute;
					left:0;
					bottom:0;
					z-index: 10;
					width:100%;
					color:#fbbe53;
					font-size:32rpx;
					text-align: center;
					line-height: 80rpx;
					background: rgba(0,0,0,0.6);
				}
			}
			.ws-book-info{
				margin-left:30rpx;
				.ws-book-name{
					font-size:40rpx;
					color:#333;
				}
				.ws-book-author{
					color:#666;
					font-size:32rpx;
					line-height:60rpx;
				}
				.ws-book-doc{
					margin-top:20rpx;
					font-size: 28rpx;
					min-height:120rpx;
					color:#666;
					line-height: 60rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.ws-book-new-catalog{
					font-size: 28rpx;
					color:#999;
					line-height: 60rpx;
				}
				.ws-book-tag{
					margin-top:20rpx;
					font-size:28rpx;
					color:#999;
					text{
						margin-right: 30rpx;
						padding:8rpx 12rpx;
						border-radius: 10rpx;
						color:#fff;
					}
					.tag-cname{
						background:#00D6B6;
						
					}
					.tag-status{
						background:#00B1FF;
					}
				}
			}
			
		}
	}
</style>
